<template>
    <div>

        <!-- <div class="industry">客户行业类型统计：</div> -->

        <div class="countHeader">
                <div class="child_count" style="cursor: pointer;" @click="tabform(realestate)">
                    <div class="count_num">{{realestate[0].number}}</div>
                    <p class="count_title">{{realestate[0].name}}</p>
                </div>
                <div class="child_count" style="cursor: pointer;" @click="tabform(internet)">
                    <div class="count_num">{{internet[0].number}}</div>
                    <p class="count_title">{{internet[0].name}}</p>
                </div>
                <div class="child_count" style="cursor: pointer;" @click="tabform(financial)">
                    <div class="count_num">{{financial[0].number}}</div>
                    <p class="count_title">{{financial[0].name}}</p>
                </div>
                <div class="child_count" style="cursor: pointer;" @click="tabform(building)">
                    <div class="count_num">{{building[0].number}}</div>
                    <p class="count_title">{{building[0].name}}</p>
                </div>
        </div>

        <div class="countHeader">
                <div class="child_count" style="cursor: pointer;" @click="tabform(foreignclientType)">
                    <div class="count_num">{{foreignclientType[0].number}}</div>
                    <p class="count_title">{{foreignclientType[0].name}}</p>
                </div>
                <div class="child_count" style="cursor: pointer;" @click="tabform(administrationType)">
                    <div class="count_num">{{administrationType[0].number}}</div>
                    <p class="count_title">{{administrationType[0].name}}</p>
                </div>
                <div class="child_count" style="cursor: pointer;" @click="tabform(privateClientType)">
                    <div class="count_num">{{privateClientType[0].number}}</div>
                    <p class="count_title">{{privateClientType[0].name}}</p>
                </div>
                <div class="child_count" style="cursor: pointer;" @click="tabform(stateownedenterpriseClientType)">
                    <div class="count_num">{{stateownedenterpriseClientType[0].number}}</div>
                    <p class="count_title">{{stateownedenterpriseClientType[0].name}}</p>
                </div>
        </div>

        <div class="countHeader">
                <div class="child_count" style="cursor: pointer;" @click="tabform(lawyerPerennialadviser)">
                    <div class="count_num">{{lawyerPerennialadviser[0].number}}</div>
                    <p class="count_title">{{lawyerPerennialadviser[0].name}}</p>
                </div>
                <div class="child_count" style="cursor: pointer;" @click="tabform(lawyeractivePerennialadviser)">
                    <div class="count_num">{{lawyeractivePerennialadviser[0].number}}</div>
                    <p class="count_title">{{lawyeractivePerennialadviser[0].name}}</p>
                </div>
                <div class="child_count">
                    <div class="count_num">{{lawyernonlitigationCaae[0].number}}</div>
                    <p class="count_title">{{lawyernonlitigationCaae[0].name}}</p>
                </div>
                <div class="child_count">
                    <div class="count_num">{{lawyeradviserCase[0].number}}</div>
                    <p class="count_title">{{lawyeradviserCase[0].name}}</p>
                </div>
        </div>

        <div class="countHeader">
                <div class="child_count">
                    <div class="count_num">{{lawyerClosen[0].number}}</div>
                    <p class="count_title">{{lawyerClosen[0].name}}</p>
                </div>
                <div class="child_count">
                    <div class="count_num">{{yearnewlawyerClosen[0].number}}</div>
                    <p class="count_title">{{yearnewlawyerClosen[0].name}}</p>
                </div>
                <div class="child_count">
                    <div class="count_num">{{yearnewlawyerAccreditation[0].number}}</div>
                    <p class="count_title">{{yearnewlawyerAccreditation[0].name}}</p>
                </div>
                <div class="child_count">
                    <div class="count_num">{{lawyerAccreditation[0].number}}</div>
                    <p class="count_title">{{lawyerAccreditation[0].name}}</p>
                </div>
        </div>

        <div class="countHeader">
                <div class="child_count">
                    <div class="count_num">{{lawyerCustomer[0].number}}</div>
                    <p class="count_title">{{lawyerCustomer[0].name}}</p>
                </div>
        </div>
       

        <div style="width:100%;margin-top:30px;">
          <el-table :data="tableData" height="250" border style="width: 100%">
            <el-table-column
              prop="content"
              :label="title"
              
              >
            </el-table-column>
          </el-table>
        </div>

      



       
    </div>
</template>
<script>
import echarts from 'echarts'
export default {
    props: {
      className: {
        type: String,
        default: 'echartDiv'
      },
      id: {
        type: String,
        default: 'yourID'
      },
      width: {
        type: String,
        default: '850px'
      },
      height: {
        type: String,
        default: '500px'
      }
    },
    data(){
        return{

          /*--------------  客户行业类型统计 ----------------*/
          realestate: [],
          internet: [],
          financial:[],
          building: [],


          twoMenu:[],


          /*--------------  客户类型统计 ----------------*/
          foreignclientType:[],
          administrationType:[],
          privateClientType:[],
          stateownedenterpriseClientType:[],

          /*--------------  客户统计 ----------------*/
          lawyerCustomer:[],
          lawyerPerennialadviser:[],
          lawyeractivePerennialadviser:[],
          
          /*--------------  业务类型统计 ----------------*/
          lawyernonlitigationCaae:[],
          lawyeradviserCase:[],

          /*--------------  案件统计 ----------------*/
          lawyerClosen:[],
          yearnewlawyerClosen:[],
          yearnewlawyerAccreditation:[],
          lawyerAccreditation:[],

          /*--------------  表单数据 ----------------*/
          title:"",
          tableData: []
            
        }
    },
    created(){
      this.getInfo()
    },
    mounted(){
      this.getExportButton()
      
    },
    beforeDestroy() {
         
    },
    methods:{
      /**
       * 获取二级按钮
       */
      getExportButton(){
         this.$http.get('/yongxu/Base/User_Two_Menu',{params:{
          Menu_Id:6,
          User_Id:localStorage.getItem('userId')
        }}).then((res)=>{
          this.twoMenu = res.data
          console.log(res)
        })
      },


      /**
       * 点击切换表单
       */
      tabform(content){
          this.title = content[0].name
          this.tableData = []
          for (let i = 0; i < content[0].content.length; i++) {
            this.tableData.push({
              content:content[0].content[i]
            })
          }
      },

      /**
       * 获取统计信息
       */
       getInfo(){

          //客户行业类型统计
          this.$http.get('/yongxu/Statistics/lawyerindustryTypestatistical',{params:{User_Id:localStorage.getItem('userId')}}).then((res)=>{
                  // this.realestateNumber = res.data.realestateNumber
                  this.title = "房地产行业"
                  for (let i = 0; i < res.data.realestateName.length; i++) {
                    this.tableData.push({
                      content:res.data.realestateName[i]
                    })
                  }
                  this.realestate.push(
                    {
                      number:res.data.realestateNumber,
                      name:"房地产行业",
                      content:res.data.realestateName
                    }
                  )

                  this.internet.push(
                    {
                      number:res.data.internetNumber,
                      name:"互联网行业",
                      content:res.data.internetName
                    }
                  )
                  this.financial.push(
                    {
                      number:res.data.financialNumber,
                      name:"金融行业",
                      content:res.data.financialName
                    }
                  )
                  this.building.push(
                    {
                      number:res.data.buildingNumner,
                      name:"师建筑行业",
                      content:res.data.buildingName
                    }
                  )
          })
          //客户类型统计
          this.$http.get('/yongxu/Statistics/lawyerCustomertypestatistical',{params:{User_Id:localStorage.getItem('userId')}}).then((res)=>{
                  // this.realestateNumber = res.data.realestateNumber
                  this.foreignclientType.push(
                    {
                      number:res.data.foreignclientTypenumber,
                      name:"外国客户数量",
                      content:res.data.foreignclientTypename
                    }
                  )
                  this.administrationType.push(
                    {
                      number:res.data.administrationTypenumber,
                      name:"政府类型客户数量",
                      content:res.data.administrationTypename
                    }
                  )
                  this.privateClientType.push(
                    {
                      number:res.data.privateClientTypenumber,
                      name:"重点民营的客户数量",
                      content:res.data.privateClientTypename
                    }
                  )
                  this.stateownedenterpriseClientType.push(
                    {
                      number:res.data.stateownedenterpriseClientTypenumber,
                      name:"重点国企的客户数量",
                      content:res.data.stateownedenterpriseClientTypename
                    }
                  )
          })

          //客户统计
          this.$http.get('/yongxu/Statistics/lawyerCustomerstatistical',{params:{User_Id:localStorage.getItem('userId')}}).then((res)=>{
                  // this.realestateNumber = res.data.realestateNumber
                  this.lawyerCustomer.push(
                    {
                      number:res.data.lawyerCustomernumber,
                      name:"客户累计总数",
                    }
                  )
                  this.lawyerPerennialadviser.push(
                    {
                      number:res.data.lawyerPerennialadvisernumber,
                      name:"常年顾问的客户数量",
                      content:res.data.lawyerPerennialadvisername
                    }
                  )
                  this.lawyeractivePerennialadviser.push(
                    {
                      number:res.data.lawyeractivePerennialadvisernumber,
                      name:"活跃的常年顾问的客户数量",
                      content:res.data.lawyeractivePerennialadvisername
                    }
                  )
          })

          //业务类型统计
          this.$http.get('/yongxu/Statistics/lawyerTypestatistical',{params:{User_Id:localStorage.getItem('userId')}}).then((res)=>{
                  // this.realestateNumber = res.data.realestateNumber
                  this.lawyernonlitigationCaae.push(
                    {
                      number:res.data.lawyernonlitigationCaaenumber,
                      name:"非诉讼案件数量",
                    }
                  )
                  this.lawyeradviserCase.push(
                    {
                      number:res.data.lawyeradviserCasenumber,
                      name:"常年顾问的案件的数量",
                    }
                  )
                 
          })

          //案件统计
          this.$http.get('/yongxu/Statistics/lawyerCaseStatistical',{params:{User_Id:localStorage.getItem('userId')}}).then((res)=>{
                  // this.realestateNumber = res.data.realestateNumber
                  this.lawyerClosen.push(
                    {
                      number:res.data.lawyerClosennumber,
                      name:"已经结案的全部案件数量",
                    }
                  )
                  this.yearnewlawyerClosen.push(
                    {
                      number:res.data.yearnewlawyerClosennumber,
                      name:"已经结案的年度新增案件数量",
                    }
                  )
                  this.yearnewlawyerAccreditation.push(
                    {
                      number:res.data.yearnewlawyerAccreditationnumber,
                      name:"已经立案的年度新增案件数量",
                    }
                  )
                  this.lawyerAccreditation.push(
                    {
                      number:res.data.lawyerAccreditationnumber,
                      name:"已经立案的全部案件全部数量",
                    }
                  )
                 
          })


      },
    } 
}
</script>
<style>
.countHeader{
    display: flex;
    flex-direction: row;
    height: 80px;
    justify-content: space-between;
   
}
.child_count{
     margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-items: center;
    justify-content: center;
    align-items: center;
    border-left: 2px solid #999999;
    flex: 1;
    font-size: 18px;
}
.child_count:first-child{
     border-left: none;
}
.count_num{
   font-weight: 600;
}
.count_title{
    margin-top: 10px;
}
/*  */
.countCase{
    margin-top: 30px;
}
.countCase_title{
    margin-left: 30px;
}
.echartDiv{
    margin: 0 auto;
}
.row_center{
    /* justify-content: center; */
    align-items: center;
}
.dingzhi{
    width:75px;
    height:30px;
    background:rgba(255,255,255,1);
    border:2px solid rgba(126,44,46,1);
    cursor: pointer;
    font-weight: 600;
    color: #7E2C2E;
    outline: none;
}
.industry{
  margin-bottom:10px;
  
}
</style>


